<template>
  <van-popup
    v-bind="$attrs"
    get-container="body"
    :close-on-click-overlay="false"
    :style="popupStyle"
    :overlay-style="overlayStyle"
  >
    <div class="result-image-modal">
      <van-row>
        <img :src="head" /><i>{{ nickname }}</i>
      </van-row>
      <p>{{ CONSTANTS.LABEL_SHARETEXTCONTENT }}</p>
      <img :src="src" />
      <!-- <radar-chart :listItem="shareItem" v-if="shareItem" ref="radarChartRef" /> -->
      <van-row>
        <div>
          <img :src="IMAGES.hhtlogo" />
          <span>
            <p>{{ CONSTANTS.LABEL_HHTAPPTEXT }}</p>
            <p>{{ CONSTANTS.LABEL_HHTAPP_SLOGAN }}</p>
          </span>
        </div>
        <div>
          <img :src="IMAGES.qrcode" />
          <p>{{ CONSTANTS.LABEL_LONGPRESS_TEXT }}</p>
        </div>
      </van-row>
    </div>
  </van-popup>
</template>
<script>
import { mapGetters } from 'vuex'
import * as CONSTANTS from '@/constants/index'
import ALLIMAGES from '@/utils/images/index'
import RadarChart from '@/components/RadarChart/Index'

export default {
  props: {
    nickname: {
      type: String,
      default: '',
      required: true,
    },
    head: {
      type: String,
      default: '',
      required: true,
    },
  },
  components: { RadarChart },
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
      popupStyle: {
        'background-color': 'transparent',
      },
      overlayStyle: {
        'background-color': 'rgba(0,0,0,0.25)',
      },
    }
  },
  computed: {
    ...mapGetters(['quiz']),
    src() {
      return this.quiz.canvasSrc
    },
    IMAGES() {
      return ALLIMAGES.quiz
    },
    shareItem() {
      if (!this.quiz) return null

      return this.quiz.shareItem
    },
  },
  mounted() {},
  filters: {},
  watch: {
    shareItem: {
      immediate: true,
      handler(v) {
        if (v) {
        }
      },
    },
  },
  methods: {
    onClose() {
      this.$emit('success')
    },
  },
}
</script>

<style lang="less" scoped>
.result-image-modal {
  width: 234px;
  height: 308px;
  background-color: #ffffff;
  border-radius: 8px;
  font-size: 16px;
  padding: 15px 18px 18px 18px;

  & > div:first-of-type {
    display: flex;
    align-items: center;
    & > img {
      width: 42px;
      height: 42px;
      background-image: linear-gradient(90deg);
      border-radius: 50%;
    }
    & > i {
      margin-left: 10px;
      font-style: normal;
      height: 13px;
      font-family: 'SourceHanSansCN-Regular';
      font-size: 13px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.8);
    }
  }

  & > p {
    margin: 0;
    margin-top: 25px;
    text-align: center;
    height: 13px;
    font-family: 'SourceHanSansCN-Medium';
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.8);
  }

  & > img {
    display: block;
    margin: 0 auto;
    margin-top: 22px;
    width: 142px;
    height: 127px;
  }

  & > div:last-of-type {
    margin-top: 20px;
    width: 100%;
    height: 58px;
    display: flex;
    & > div:first-of-type {
      display: flex;
      margin-top: auto;
      & > img {
        width: 40px;
        height: 40px;
        border-radius: 8px;
      }
      & > span {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 8px;
        & > p {
          margin: 0;
        }
        & > p:first-of-type {
          line-height: 12px;
          font-family: 'SourceHanSansCN-Medium';
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: rgba(0, 0, 0, 0.8);
        }

        & > p:last-of-type {
          margin-top: 7px;
          line-height: 10px;
          font-family: 'SourceHanSansCN-Normal';
          font-size: 10px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }

    & > div:last-of-type {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: auto;
      & > img {
        width: 40px;
        height: 40px;
        border-radius: 3px;
      }

      & > p {
        margin: 0;
        margin-top: 8px;
        line-height: 10px;
        font-family: 'SourceHanSansCN-Normal';
        font-size: 10px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: rgba(0, 0, 0, 0.8);
      }
    }
  }
}
</style>
